//
//
//
//
//
//
//
//
//
//
//
//
//
//
//

import { mapGetters, mapActions } from "vuex";
import _ from "lodash";
import template from "./miPaiTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  props: [
    "issue",
    "issueNow",
    "lottRstHtml",
    "timersShow",
    "timers",
    "showMiPai",
  ],
  data() {
    return {
      nextIssue: true,
      timerHtml: "",
      lottery_type: this.$route.query.lottery_type,
    };
  },
  mounted() {},
  computed: {
    ...mapGetters(["roomData"]),
  },
  methods: {
    getElementLeft: function (element) {
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;

      while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }

      return actualLeft;
    },
    getElementTop: function (element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;

      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }

      return actualTop;
    },
    initCvs: function () {
      var that = this;
      var mpCvs = document.getElementById("mpCvs");
      var rstBox = document.getElementById("rstBox");
      mpCvs.setAttribute("class", "");

      mpCvs.width = rstBox.clientWidth;
      mpCvs.height = rstBox.clientHeight;
      var ctx = mpCvs.getContext("2d");
      var oLeft = that.getElementLeft(mpCvs);
      var oTop = that.getElementTop(mpCvs);
      var isStart = false;
      var textLeftOst = mpCvs.width / 2,
        textToptOst = mpCvs.height / 2;
      ctx.fillStyle = "silver";
      ctx.fillRect(0, 0, mpCvs.width, mpCvs.height);
      ctx.textAlign = "center";
      ctx.textBaseLine = "middle";
      ctx.font = "16px 微软雅黑";
      if (that.timersShow == 2) {
        ctx.fillStyle = "#C82834";
        ctx.fillText("开奖中", textLeftOst, textToptOst);
        return false;
      } else if (that.nextIssue) {
        ctx.fillStyle = "#FF730C";
        ctx.fillText("已有结果，请刮图层", textLeftOst, textToptOst + 5);
      }
      mpCvs.addEventListener("touchstart", function () {
        isStart = true;
        ctx.lineWidth = 5;
        ctx.moveTo(
          event.touches[0].clientX - oLeft,
          event.touches[0].clientY - oTop + window.pageYOffset
        );
      });
      mpCvs.addEventListener("touchend", function () {
        isStart = false;
        //  默认值
        ctx.globalCompositeOperation = "source-over";
      });

      mpCvs.addEventListener("touchmove", function (e) {
        // 原有内容中与新图形不重叠的部分会被保留， 重叠的部分，没有了
        ctx.globalCompositeOperation = "destination-out";
        if (isStart && that.timersShow != 2 && that.nextIssue) {
          ctx.lineTo(
            event.touches[0].clientX - oLeft,
            event.touches[0].clientY - oTop + window.pageYOffset
          );
          ctx.stroke();
          /* 获取imageData对象*/
          var imageDate = ctx.getImageData(
            0,
            0,
            mpCvs.width,
            mpCvs.height
          ); /* */
          var allPX = imageDate.width * imageDate.height;
          var iNum = 0; //记录刮开的像素点个数
          for (var i = 0; i < allPX; i++) {
            if (imageDate.data[i * 4 + 3] == 0) {
              iNum++;
            }
          }
          if (iNum >= allPX * 0.5) {
            // disappear里面写了缓慢清除的css3动画效果
            mpCvs.setAttribute("class", "disappear");
          }
        }
      });
      mpCvs.onmouseleave = function (e) {};
    },
  },
  components: {},
  watch: {
    issue: function (newVal, oldVal) {
      if (newVal != oldVal) {
        this.nextIssue = true;
      }
    },
    lottRstHtml: {
      handler(newVal, oldVal) {
        this.initCvs();
      },
    },
    timers: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          var timerHtml = document.getElementById("timerHtml").innerHTML;
          this.timerHtml = timerHtml;
        });
      },
      deep: true,
    },
    timersShow: function (newVal, oldVal) {
      setTimeout(() => {
        var timerHtml = document.getElementById("timerHtml").innerHTML;
        this.timerHtml = timerHtml;
        console.log(this.timerHtml);
      });
      if (newVal == 2) {
        //开奖中
        this.nextIssue = false;
        this.initCvs();
      }
    },
    showMiPai: function (newVal) {
      if (newVal) {
        this.initCvs();
      }
    },
  },
  filters: {
    issueFilter(input) {
      if (input && input.length > 10) {
        return input.slice(4, input.length);
      } else {
        return input;
      }
    },
  },
  deactivated() {},
  beforeDestroy() {},
};

// WEBPACK FOOTER //
// ./src/components/room/roomTitle/miPai/miPai.vue
